<template>
    <view class="w-[100%] bg-[rgba(0,0,0,0.4)] relative flex flex-col">
        <image src="@/static/images/index_bg/hy_bg.png" :mode="'widthFix'"
            class="w-[100%] z-[-1] absolute top-0 bg-[#000000]">
        </image>
        <view class=" mb-[26rpx] ">
            <view :style="{
                paddingTop: menuButtonInfoBottom + 'px'
            }" class="flex justify-around   ">
                <view class="flex mt-[30rpx]">
                    <up-avatar size="84rpx" :src="userStore?.avatar"></up-avatar>
                    <view class="ml-[12rpx]">
                        <view class="text-[28rpx] text-[#FFFFFF] font-[400]">{{ userStore?.userName }}</view>  
                        <view v-if="userStore.isMember == 1" class="text-[22rpx] text-[#999999] mt-[7rpx]">会员有效期至{{ $u.timeFormat(new Date(userStore?.memberCreateTime).getTime() + (userStore?.memberTotalValidity * 24 * 3600 * 1000),'yyyy年mm月dd日 hh时MM分') }}</view>
                        <view v-else class="text-[22rpx] text-[#999999]  mt-[7rpx]">开通会员可享受超多权益</view>
                    </view>
                </view>

                <view>
                    <image src="@/static/images/index_bg/zs.png" class="w-[230rpx] h-[160rpx]"></image>
                </view>
            </view>
        </view>
        <!-- 充值选择 -->
        <view class="pl-[32rpx] w-[100%] mt-[-65rpx]">
            <view class="flex flex-wrap">
                <!-- 月卡 -->
                <view v-for="(item, index) in vipList" :key="index" class="w-[208rpx] mb-[20rpx] h-[208rpx] card-item"
                    :class="[selectedCard == item.id ? 'active' : '']" @click="selectCard(item.id, item)"
                    :style="index > 0 ? 'margin-left: 32rpx' : ''">
                    <view
                        class="w-[208rpx] font-[600] text-[rgb(255,239,184)] text-[30rpx] h-[66rpx] bg-main flex justify-center items-center">
                        {{ item.description }}
                        <!-- <image class="w-[72rpx] h-[34rpx]" src="@/static/images/index_bg/yk.png"></image> -->
                    </view>
                    <view class="w-[208rpx] h-[142rpx] bg-[#000000] flex justify-center items-center">
                        <view class="flex items-center mt-[-70rpx]">
                            <text class="text-[28rpx] font-[400] text-[#FFFFFF]">￥</text>
                            <text class="font-[D-DIN-PRO] font-[500] text-[44rpx] text-[#FFEFB8]">{{ item.price
                            }}</text>
                        </view>
                    </view>
                    <view v-if="item.isDiscount == 1" class="mt-[-40rpx] relative">
                        <image class="w-[153.68rpx] h-[76rpx] ml-[28rpx] mt-[-50rpx] absolute"
                            src="@/static/images/index_bg/qcbg.png"></image>
                        <text
                            class="absolute left-[70rpx] top-[-26rpx] font-normal text-[24rpx] text-[#666666] line-through">￥{{
                                item.originalPrice }}</text>
                    </view>
                </view>
                <!-- 半年卡 -->
                <!-- <view class="w-[208rpx] h-[208rpx] ml-[32rpx] card-item">
                    <view class="w-[208rpx] h-[66rpx] bg-[#222222] flex justify-center items-center">
                        <image class="w-[105rpx] h-[34rpx]" src="@/static/images/index_bg/bnk.png"></image>
                    </view>
                    <view class="w-[208rpx] h-[142rpx] bg-[#000000] flex justify-center items-center">
                        <view class="flex items-center mt-[-70rpx]">
                            <text class="text-[28rpx] font-[400] text-[#FFFFFF]">￥</text>
                            <text class="font-[D-DIN-PRO] font-[500] text-[44rpx] text-[#FFEFB8]">299</text>
                        </view>
                    </view>
                    <view class="mt-[-40rpx] relative">
                        <image class="w-[153.68rpx] h-[76rpx] ml-[28rpx] mt-[-50rpx] absolute"
                            src="@/static/images/index_bg/qcbg.png"></image>
                        <text
                            class="absolute left-[70rpx] top-[-26rpx] font-normal text-[24rpx] text-[#666666] line-through">￥399</text>
                    </view>
                </view> -->

                <!-- 年卡 -->
                <!-- <view class="w-[208rpx] h-[208rpx] ml-[30rpx] card-item">
                    <view class="w-[208rpx] h-[66rpx] bg-[#222222] flex justify-center items-center">
                        <image class="w-[72rpx] h-[34rpx]" src="@/static/images/index_bg/nk.png"></image>
                    </view>
                    <view class="w-[208rpx] h-[142rpx] bg-[#000000] flex justify-center items-center">
                        <view class="flex items-center mt-[-70rpx]">
                            <text class="text-[28rpx] font-[400] text-[#FFFFFF]">￥</text>
                            <text class="font-[D-DIN-PRO] font-[500] text-[44rpx] text-[#FFEFB8]">299</text>
                        </view>
                    </view>
                    <view class="mt-[-40rpx] relative">
                        <image class="w-[153.68rpx] h-[76rpx] ml-[28rpx] mt-[-50rpx] absolute"
                            src="@/static/images/index_bg/qcbg.png"></image>
                        <text
                            class="absolute left-[70rpx] top-[-26rpx] font-normal text-[24rpx] text-[#666666] line-through">￥399</text>
                    </view>
                </view> -->
            </view>
        </view>
        <!-- 开通按钮 -->
        <view class="w-[100%] flex justify-center">
            <view class="w-[300rpx] h-[72rpx] mt-[20rpx] ">
                <up-button :text="userStore.isMember == 1 ? '续费会员' : '立即开通'" :loading="loading" loadingText="请稍后" @click="pay" :customStyle="{
                    background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
                    color: '#000000',
                    borderRadius: '16rpx',
                    fontweight: '500',
                    padding: '12rpx 86rpx',
                    fontSize: '32rpx',
                    height: '60rpx',
                    lineHeight: '48rpx',
                    border: 'none',
                }"></up-button>
            </view>
        </view>
        <!-- 横幅 -->
        <view class="w-[100%] mt-[20rpx] px-[32rpx] ">
            <view class="flex justify-center  bg-[#000000]" style="border: 2rpx solid #FFEFB8 ; border-radius: 16rpx;">
                <view class="mt-[22rpx]">
                    <text
                        class="w-[140rpx] h-[40rpx] font-[500] text-[28rpx] text-[#FFEFB8] leading-[40rpx]  font-[PingFangSC]">超级线索包</text>
                    <text
                        class="pl-[24rpx] w-[262rpx] h-[40rpx] font-[400] text-[28rpx] text-white leading-[40rpx]   font-[PingFangSC]">数量有限
                        免费赠会员</text>

                </view>
                <view>
                    <image class="w-[24.16rpx] h-[40rpx]" src="@/static/images/index_bg/ld.png"></image>
                </view>
                <view @click="push('/pages_qc/clue_package/index')" class="w-[156rpx] my-[12rpx] h-[60rpx] ml-[22rpx] ">
                    <up-button text="立即购买" :customStyle="{
                        background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)',
                        color: '#000000',
                        borderRadius: '4rpx',
                        fontweight: '500',
                        padding: '10rpx 22rpx',
                        fontSize: '28rpx',
                        height: '60rpx',

                        border: 'none',

                    }"></up-button>
                </view>
            </view>
        </view>
        <!-- 收买车 -->
        <view class="z-[2] w-[100%] px-[32rpx] flex justify-between items-center">
            <image class="w-[328rpx] h-[124rpx] mt-[20rpx]" src="@/static/images/index_bg/Collection.png">
            </image>
            <image class="w-[328rpx] h-[124rpx] mt-[20rpx]" src="@/static/images/index_bg/buycar.png">
            </image>
        </view>
        <view class="flex  justify-around mt-[-26rpx] text-[24rpx] text-[#FFFFFF] z-[5]">
            <view style="background: linear-gradient( 180deg, #000000 0%, #2A2A2A 100%);"
                class=" leading-[52rpx]   pl-[28rpx] w-[296rpx] h-[52rpx]  rounded-[12rpx] border-[2rpx] border-[#000000]">
                全国收车比武参与权限</view>
            <view style="background: linear-gradient( 180deg, #000000 0%, #2A2A2A 100%);"
                class=" leading-[52rpx] pl-[28rpx] w-[296rpx] h-[52rpx]  rounded-[12rpx] border-[2rpx] border-[#000000]">
                全国买车精准意向客户</view>
        </view>
        <!-- 会员权益 -->
        <view class="w-[100%] px-[32rpx] mt-[25rpx] ">
            <view class="w-[100%]">
                <view class="w-[100%] justify-center items-center h-[36rpx] flex ">
                    <image class="w-[52rpx] h-[20rpx]" src="@/static/images/index_bg/left_z.png"></image>
                    <image class="w-[152rpx] h-[36rpx] mx-[24rpx]" src="@/static/images/index_bg/hyqy.png"></image>
                    <image class="w-[52rpx] h-[20rpx]" src="@/static/images/index_bg/right_y.png"></image>
                </view>
                <view class="w-[100%] p-[24rpx] bg-[#121212] rounded-[16rpx] mt-[30rpx]">
                    <view class="flex flex-wrap justify-between">
                        <view v-for="(item, index) in memberBenefits" :key="index" class="flex items-center py-[16rpx]"
                            :style="{
                                'border-bottom': '2rpx solid #242424',
                                'border-right': 'none'
                            }">
                            <image class="w-[32rpx] h-[32rpx]" src="@/static/images/index_bg/tg.png"></image>
                            <view class="pl-[12rpx] w-[248rpx] font-normal text-[24rpx] text-[#B9B9B9] leading-[36rpx]">
                                {{ item }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
    <view @click="push('/pages_qc/balance/balance')" class="flex justify-center items-center mt-[10rpx] mb-[20rpx]">
        <view class="w-[100rpx] h-[2rpx] bg-[#FFEFB8]"></view>
        <text class="mx-[20rpx] text-[28rpx] text-[#FFEFB8]">兑换会员</text>
        <view class="w-[100rpx] h-[2rpx] bg-[#FFEFB8]"></view>
    </view>
    <tabBar />
</template>

<script setup>
import {
    onLoad,
    onShow
} from '@dcloudio/uni-app'
import {
    ref
} from 'vue'
import { memberList, memberPay } from '@/api/vip'
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const memberBenefits = [
    '免费发布车源',
    '免费一键刷新',
    '求购/收购/批发/询价',
    '擦亮/一键/刷新/置顶',
    '打电话/加微信',
    '查访客/查详情',
    '突破每日限制电话/微信/私信',
    '实时动态接受提醒/访客/明细',
    '尊贵身份',
    '智能推送',
    'vip专属标识/彰显信任背书',
    '实时动态接受/平台消息明细'
];

const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
const selectedCard = ref(0) // 默认选中月卡
const vipInfo = ref({}) // 会员信息

// 选择会员卡类型1
const selectCard = (type, e) => {
    selectedCard.value = type
    vipInfo.value = e
}
const loading = ref(false)
const pay = async () => {
    if (!vipInfo.value.price || !vipInfo.value.id) {
        uni.$u.toast('未能获取到套餐信息，请重新选择')
        return
    }
    try {
        loading.value = true;
        await memberPay({
            memberId: vipInfo.value.id
        }).then((res) => {
            if (res.code == 200) {
                uni.navigateTo({
                    url: `/pages_qc/pay/pay?amount=${vipInfo.value.price}&orderNo=${res.data.outTradeNo}`
                })
            } else {
                uni.$u.toast(res.msg)
                loading.value = false
            }
        })
    } catch (error) {
        uni.$u.toast(error)
    } finally {
        loading.value = false
    }
}
onLoad(() => {
    menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90;
    console.log(uni.getMenuButtonBoundingClientRect())
})
// 会员套餐
const vipList = ref([])
onShow(async () => {
    // uni.setTabBarStyle({
    //     backgroundColor: '#000000',
    //     color: '#FEE9B2',
    //     borderStyle: 'white'
    // })
    const { rows } = await memberList()
    selectedCard.value = rows[0]?.id
    vipInfo.value = rows[0]
    vipList.value = rows
    if (userStore.isLogin) {
        userStore.getInfo(userStore.userId);
    }
})
</script>

<style lang="scss" scoped>
.card-item {
    position: relative;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.active {
    border: 2rpx solid #FFEFB8;
}

.bg-gradient {
    background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
}

.bg-dark {
    background: #222222;
}
</style>
